import { watch } from "vue";
import { useScroll, type Result } from "../useScroll";

interface options {
    scrollElement?: Element,
    left?: number,
    top?: number,
}


/**
 * 滚动条在滚动可视区域，指定位置时可见
 * @param target 目标元素
 * @param options left离左侧距离，top离顶部距离
 */
export const useScrollVisable = function (
    target?: HTMLElement,
    options?: options
): Result | undefined {

    if (!target) return;

    const { position, remove } = useScroll(options?.scrollElement || document)
    watch(position, ({ left, top }) => {
        // console.info(left, top)

        if (left > (options?.left || -1) && top > (options?.top || -1)) {
            target.style.visibility = "visible"
        } else {
            target.style.visibility = 'hidden'
        }
    }, {
        immediate: true
    })

    return {
        position, remove
    }
}